<template>
	<view class="my-balance">
		<view class="my-balance-tabs" style="padding-bottom: 60rpx;">
			<u-tabs :list="list1" v-model="current" @click="handleClick" lineWidth="48rpx" lineColor="#40C6A1"
				lineHeight='12rpx' :activeStyle="activeStyle" :inactiveStyle="inactiveStyle"
				itemStyle=" padding-right: 15px;padding-bottom:20rpx; height: 34px;"></u-tabs>
			<view v-if="current === 0" class="u-tabs-one">
				<view class="u-tabs-one-con" v-for="v,i in rechargeList" :key="i">
					<view class="u-tabs-one-con-three">
						<view class="u-tabs-one-con-tit">
							<view class="">
								金额 {{v.fee}}元
							</view>
						</view>
						<view class="u-tabs-one-con-message">
							<view class="">
								充值时间：{{moment(v.time).format('YYYY/MM/DD HH:mm:ss')}}
							</view>
							<view class="">
								充值方式：{{v.charge_type==1?'微信支付':'系统返回'}}
							</view>
							<view class="u-tabs-one-con-message-fz">
								<text>订单编号：{{v.order_num}}</text>
								<text @click="copyNumber(v.order_num)">复制</text>
							</view>
						</view>
					</view>
				</view>
				<no-data v-if="rechargeList.length==0" title='暂无充值明细'></no-data>
			</view>
			<view v-if="current === 1">
				<view class="u-tabs-one-con" v-for="v,i in useList" :key="i">
					<view class="u-tabs-one-con-four">
						<view class="u-tabs-one-con-tit">
							<view class="">
								消费金额 {{v.fee}}元
							</view>
						</view>
						<view class="u-tabs-one-con-message">

							<view class="">
								使用门店：{{v.store}}
							</view>
							<view class="">
								使用时间：{{moment(v.starttime).format('YYYY/MM/DD HH:mm')}}
							</view>
							<view class="">
								下单时间：{{moment(v.order_time).format('YYYY/MM/DD HH:mm:ss')}}
							</view>
							<view class="u-tabs-one-con-message-fz">
								<text>订单编号：{{v.order_num}}</text>
								<text @click="copyNumber(v.order_num)">复制</text>
							</view>
						</view>
					</view>
				</view>
				<no-data v-if="useList.length==0" title='暂无使用明细'></no-data>
			</view>
			
		</view>
	</view>
	</view>
</template>

<script>
	import moment from 'moment'
	import {
		get_balance_details_api,
	} from '@/common/api.js'
	export default {
		data() {
			return {
				moment: moment,
				activeStyle: {
					fontSize: '36rpx',
					color: '#606266',
					fontWeight: 500,
					marginLeft: '10rpx'
				},
				inactiveStyle: {
					color: '#909399',
					transform: 'scale(1)',
					fontSize: '28rpx',
					marginLeft: '20rpx'
				},
				current: 0,
				serialNumber: 7472857374885949,
				rechargeList: [],
				useList: [],
				list1: [{
					name: '充值明细',
				}, {
					name: '使用明细',
				}, ],
			};
		},
		onLoad() {
			this.getBlance()
		},
		methods: {
			getBlance() {
				get_balance_details_api().then(res => {
					this.rechargeList = res.data.charge_list
					this.useList = res.data.consume_list
				})
			},
			handleClick(item) {
				this.current = item.index
			},
			// 复制订单编号
			copyNumber(serialNumber) {
				uni.setClipboardData({
					data: serialNumber.toString(),

				})
				uni.showToast({
					title: '复制成功',
					icon: 'success'
				})


			}
		}
	}
</script>

<style lang="scss">
	.my-balance {
		margin-top: 36rpx;
	}

	.u-tabs-one-con {
		margin-top: 44rpx;

		.u-tabs-one-con-three {
			width: 702rpx;
			height: 270rpx;
			background: #F3F4F6;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			margin: 0 auto 24rpx;

			.u-tabs-one-con-tit {
				box-sizing: border-box;
				padding: 16rpx 24rpx;
				width: 702rpx;
				height: 88rpx;
				background: #40C6A1;
				border-radius: 16rpx 16rpx 0rpx 0rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				view {
					font-size: 36rpx;
					font-weight: 500;
					color: #FFFFFF;
				}

				text {
					font-size: 28rpx;
					font-weight: 400;
					color: #FFFFFF;
				}
			}

			.u-tabs-one-con-message {
				box-sizing: border-box;
				margin: 8rpx 24rpx 0;

				view {
					height: 50rpx;
					line-height: 50rpx;
					font-size: 28rpx;
					font-weight: 400;
					color: #606266;
				}

				.u-tabs-one-con-message-fz {
					display: flex;
					justify-content: space-between;

					text {
						color: #606266;
						font-size: 28rpx;
						font-weight: 400;
					}
				}

			}
		}

		.u-tabs-one-con-four {
			width: 702rpx;
			height: 320rpx;
			background: #F3F4F6;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			margin: 0 auto 24rpx;

			.u-tabs-one-con-tit {
				box-sizing: border-box;
				padding: 16rpx 24rpx;
				width: 702rpx;
				height: 88rpx;
				background: #40C6A1;
				border-radius: 16rpx 16rpx 0rpx 0rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				view {
					font-size: 36rpx;
					font-weight: 500;
					color: #FFFFFF;
				}

				text {
					font-size: 28rpx;
					font-weight: 400;
					color: #FFFFFF;
				}
			}

			.u-tabs-one-con-message {
				box-sizing: border-box;
				margin: 8rpx 24rpx 0;

				view {
					height: 50rpx;
					line-height: 50rpx;
					font-size: 28rpx;
					font-weight: 400;
					color: #606266;
				}

				.u-tabs-one-con-message-fz {
					display: flex;
					justify-content: space-between;

					text {
						color: #606266;
						font-size: 28rpx;
						font-weight: 400;
					}
				}

			}
		}
	}
</style>